<template>
  <div>
    <div class="table_container">
      <el-table
        :data="listData.list"
        ref="mesTable"
        max-height="440"
        v-loading="isLoading"
        border
        stripe
        @sort-change="_sort"
        tooltip-effect="dark">
        <mes-col-comp
          :key="index"
          v-for="(column, index) in tableColumns"
          :column="column">
        </mes-col-comp>
      </el-table>
    </div>
    <!--分页组件-->
    <mes-pagination
      @updateData="getTableList"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
  </div>
</template>

<script>
export default {
  name: 'LoadQueryTable',
  props: {
    // 表格列表
    tableColumns: Array,
    // 负荷查询：当前年份
    currentYear: Date,
    // 负荷查询：所选班组
    workgroupId: String,
    // 负荷查询：所选工作中心
    workcenterId: String
  },
  data() {
    return {
      isLoading: false, // 表格是否加载
      sortData: {}, // 表格排序对象
      listData: {}, // 表格数据
    }
  },
  methods: {
    // 初始化表格
    initTable() {
      this.getTableList()
    },
    // 刷新表格
    refreshTable() {
      this.sortData = {}
      this.$refs.mesTable.clearSort()
      this.getTableList()
    },
    // 格式化数据
    formatPostData(page) {
      const fields = []
      let postData = {
        pageNo: page ? page.pageNo : 1,
        pageSize: page ? page.pageSize : this.listData.pageSize || 15,
        sort: this.sortData,
        query: {
          columns: this.tableColumns.reduce((pre, cur) => [...pre, cur.prop], fields),
          viewSource: 6
        }
      }
      if (this.currentYear) {
        const date = new Date(this.currentYear)
        postData.query.beginPracticalStartDate = this.moment(date).startOf('year').format('YYYY-MM-DD 00:00:00')
        postData.query.endPracticalStartDate = this.moment(date).endOf('year').format('YYYY-MM-DD 23:59:59')
      }
      if (this.workgroupId) {
        postData.query.workgroupId = this.workgroupId
      }
      if (this.workcenterId) {
        postData.query.workcenterId = this.workcenterId
      }
      return postData
    },
    /**
     * 列表数据获取
     * @param page
     */
    getTableList(page) {
      let postData = this.formatPostData(page)
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/list',
        data: postData,
        noCommit: true
      }).then((res) => {
        this.listData = res.data || {}
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.getTableList()
    },
  }
}
</script>

<style scoped>

</style>
